<template>
	<div class="team">
		
			<c-head text="拼团"></c-head>
		<div class="back">
		</div>
		<div class="show">
			<template v-if="list[idx]">
				<div class="card">
					<dl>
						<dt>
							<img :src="list[idx].url" alt="" />
						</dt>
						<dd class="kua">
							<h3 style="font-size: 18px; font-weight: bold">
								{{ list[idx].names }}
							</h3>
							<s>{{ list[idx].price }}.00</s>
							<p>
								<van-count-down :time="time" />
							</p>
							<p>
								已有1人参团，仅差{{ list[idx].max - 1 }}人
								<span class="btn2" @click="goUp(list[idx])">查看详情</span>
							</p>
						</dd>
					</dl>
				</div>
			</template>
		</div>
		<div class="show2">
			<h3 style="font-size: 18px; font-weight: bold">发起拼团</h3>
			<p>与<span style="color: red">新用户</span>一起享受优惠</p>
			<div class="menu"><span>+</span><span>+</span></div>
			<div class="btn">
				<span>一键开团</span>
			</div>
		</div>
		<div class="any">
			<b>大家都在拼</b>
		</div>
		<div class="show3">
			<div class="group">
				<dl class="bbox" v-for="(item, index) in list" :key="index">
					<dt class="pap">
						<img :src="item.url" alt="" />
					</dt>
					<dd class="kua">
						<p>{{ item.names }}</p>
						<p class="style3">
							<span class="style1">{{ item.max }} 人团</span
							><span class="style2">已拼{{ item.num }}件</span>
						</p>
						<p class="style4">
							<span>拼团价￥</span><span>{{ item.price }}.00</span>
						</p>
					</dd>
					<dd class="pin"><span @click="handPin(index)">去拼团</span></dd>
				</dl>
			</div>
		</div>
	</div>
</template>

<script>
import CHead from "../../components/headers.vue";
export default {
	name: "team",
	components: {
		CHead,
	},
	data() {
		return {
			time: 30 * 60 * 60 * 1000,
			list: [],
			idx:1,
		};
	},
	created() {
		this.$api.groupList().then((res) => {
			console.log(res, "yytyy");
			this.list = res.list;
		});
	},
	methods: {
		handPin(index) {
			this.idx=index;
		},
		goUp(arr) {
			console.log(arr)
			this.$router.push({
				path: "/teamDetail",
				query: { id:arr },
			});
		},
	},
};
</script>

<style scoped>
.head{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}
.any {
	position: absolute;
	top: 383px;
	left: 15px;
	font-size: 15px;
	z-index: 99999;
}
.bbox {
	margin: 6px 0;
}
.pap {
	height: 90px;
}
.group {
	width: 100%;
	height: 100px;
	margin-top: 10px;
	font-size: 10px;
}
.pin {
	margin-left: 63px;
	margin-top: 50px;
	background: rgb(252, 74, 38);
	display: block;
	padding: 2px 8px;
	border-radius: 14px;
	color: white;
}
.kua {
	margin-left: 10px;
}
.style3 {
	font-size: 10px;
	border-radius: 10px;
	text-align: center;
}
.style4 {
	color: rgb(252, 74, 38);
}
.style1 {
	background: linear-gradient(
		to right,
		rgb(252, 111, 37),
		rgb(252, 74, 38),
		rgb(252, 42, 38)
	);
	color: seashell;
	padding-left: 6px;
	border: 1px solid #f92;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.style2 {
	border: 1px solid #f92;
	background: seashell;
	color: red;
	padding-right: 6px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.group > dl {
	display: flex;
	align-items: center;
}
.group > dl > dd > p {
	margin: 5px 0;
}
.group > dl > dt {
	width: 90px;
	height: 100px;
}
.btn2 {
	background: rgb(252, 74, 38);
	color: white;
	padding: 3px 6px;
	border-radius: 10px;
}
.menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.show2 > h3 {
	margin-top: 10px;
}
.show2 > p {
	margin-top: 10px;
	margin-bottom: 10px;
}
.btn {
	margin: 0 auto;
	width: 85%;
	height: 40px;
	background: linear-gradient(
		to right,
		rgb(252, 111, 37),
		rgb(252, 74, 38),
		rgb(252, 42, 38)
	);
	line-height: 40px;
	color: white;
	border-radius: 5px;
}
.menu > span {
	width: 50px;
	height: 50px;
	border: 2px #666 dashed;
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
	margin: 0 15px;
}
.team {
	width: 100%;
	height: 100%;
	position: relative;
	font-size: 10px;
}
.back {
	width: 100%;
	position: absolute;
	height: 280px;
	background-color: red;
	background-position: -2px 1px;
	background-size: 100%;
	display: flex;
	z-index: -100;
	background-image: url(../../assets/images/1.jpg);
}
.show {
	width: 90%;
	background: white;
	height: 120px;
	margin: 0 auto;
	border-radius: 10px;
	position: absolute;
	top: 44px;
	left: 18px;
}
.card {
	display: flex;
	width: 95%;
	height: 110px;
	margin-top: 5px;
	margin-left: 8px;
}
.van-count-down {
    color: #323233;
    font-size: 14px;
    line-height: 23px;
    color: #fff;
    background: red;
    width: 57px;
}
.card dl {
	display: flex;
	align-items: center;
}
.card dl > dd > p {
	font-size: 10px;
}
.card dl > dt {
	width: 100px;
	height: 105px;
}
.card dl > img {
	width: 100%;
	height: 100%;
}
.show3 {
	width: 90%;
	height: 270px;
	border-radius: 15px;
	position: absolute;
	overflow: scroll;
	top: 395px;
	left: 18px;
}
.show2 {
	box-shadow: 0 0 10px #ddd;
	text-align: center;
	width: 90%;
	background: white;
	height: 200px;
	border-radius: 15px;
	position: absolute;
	top: 180px;
	left: 18px;
}
img {
	width: 100%;
	height: 92%;
}
</style>